<script lang="ts" setup>
    import { ref,computed,watch } from 'vue';
    import ModelListLi from '../modelListLi/index.vue'
    import API from '@/services'
    import { useStore } from '@/store';
    const store = useStore()


    const dataModelId = computed(() => store.state.metricsdevelop.dataModelId);

    const visible = ref(false);

    const openCheckDialog = () => {
        visible.value = true
    }

    const dimensionData :any = ref()

    const getDimensionList = async (id:number) => {
        const params = {
            columnName: '',
            modelId: id
        }
        const {code, data} = await API.dataModel.postGetModelTableColumn({
            ...params
        })
        if (code === 200) {
            
            dimensionData.value = data?.filter((item:any) => item.ifBindDimension === 1)
        }
    }
    watch(dataModelId, (val: any) => {
      if (val) {
        getDimensionList(val);
      }
    },{
        immediate:true
    });


    defineExpose({
        openCheckDialog
    })

</script>

<template>

    <a-modal 
        v-model:visible="visible" 
        hideCancel
        title="可用维度"
        width="396px"
        :unmountOnClose="true"
        :maskClosable="false"
        class="checkModalDialog"
    >   
        <ul>
            <li v-for="item in dimensionData">
                <model-list-li :model-item="item" :is-check="true"></model-list-li> 
            </li>
        </ul>
         
    </a-modal>
</template>
<style>
.checkModalDialog .arco-modal-footer {
    display: none;
}
</style>
<style lang="scss" scoped>
ul {
    padding: 0;
    margin: 0;
    li {
        list-style: none;
        margin-top: 20px;
        &:first-child {
            margin-top: 0px;
        }
    }
}
</style>